<template>
  <view class="weather">
    <view class="icon">
      <image :src="'/static/icons/'+ weatherNow.icon +'.svg'" mode=""></image>
    </view>
    <view class="text">
      {{weatherNow.temp}}°C
    </view>
    <view class="text">
      {{weatherNow.text}}
    </view>
    <view class="text">
      {{weatherNow.windDir}} {{weatherNow.windScale}}级
    </view>
    <view>
      <view class="text">
        体感温度：{{weatherNow.feelsLike}}°C
      </view>
      <view class="text">
        湿度：{{weatherNow.humidity}}%
      </view>
      <view class="text">
        今日适宜穿着：{{dressAdvice}}
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { CONFIG } from '../../utils/config';
import { userStore } from '../../store/userStore';

let store = userStore();
onLoad(() => {
  getWeather();
});

let weatherNow = ref({});

async function getWeather() {
  let res = await uni.$get(CONFIG.hefeng_now, {
    key: CONFIG.hefeng_key,
    location: CONFIG.hefeng_location
  });
  if (res.code == 200) {
    weatherNow.value = res.now;
    console.log(res.now);
    // 根据天气数据设置穿着建议
    setDressAdvice();
  }
}

// 穿着建议
let dressAdvice = ref('');
function setDressAdvice() {
  const { temp } = weatherNow.value;
  if (temp < 10) {
    dressAdvice.value = '建议穿着：棉衣、羽绒服等厚重衣物';
  } else if (temp < 20) {
    dressAdvice.value = '建议穿着：毛衣、外套等保暖衣物';
  } else {
    dressAdvice.value = '建议穿着：短袖、衬衫等轻薄衣物';
  }
}
</script>

<style scoped>
.weather {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #e0e0e0; /* 页面背景色 */
}

.icon {
  border: 4px solid #333;
  border-radius: 50%;
  padding: 5px;
  margin-bottom: 20px;
  background-color: #fff; /* 图标背景色 */
}

.icon image {
  width: 100px;
  height: 100px;
}

.text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  padding: 5px 15px;
  border: 2px solid #333;
  border-radius: 5px;
  background-color: #fff; /* 文本背景色 */
  display: inline-block;
  text-align: center;
}

.text:last-child {
  margin-bottom: 0;
}

/* 为不同的天气状况添加不同的背景颜色 */
.sunny .text {
  background-color: #fffbe6; /* 晴天背景色 */
}

.cloudy .text {
  background-color: #f0f0f0; /* 多云背景色 */
}

.rainy .text {
  background-color: #e3f2fd; /* 雨天背景色 */
}

/* 媒体查询，为小屏幕设备调整样式 */
@media (max-width: 768px) {
  .icon image {
    width: 80px;
    height: 80px;
  }

  .text {
    font-size: 16px;
  }
}
</style>